<%--
  Created by IntelliJ IDEA.
  User: 17675
  Date: 2025/5/22
  Time: 14:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--设置模板生成的基本路径，保证所有的url资源都是重根目录出发的-->
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Login</title>
    <!--设置模板生成的基本路径，保证所有的url资源都是重根目录出发的-->
    <base href="<%=basePath%>">

    <!--使用bootsrap前端框架，快速开发，这里引入框架的网络引擎接口-->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>


<body>

<!--从框架给的模板中，复制出自己想要的内容进行修改-->
<div class="container">
    <h1 style="text-align: center">用户管理系统---登陆</h1>

    <div class="row">
        <div class="col-md-3"></div>

        <div class="col-md-6">
            <!--这里的表单提交中：action由于配置了基础路径所以这里就不加/了，如果不配置基本路径，加/浏览器默认是站点根目录而不是相对路径，就需要再加上缺失路径
            enctype="multipart/form-data"说明的是表单提交中包含多种类型的格式文件，因为我们这里需要上传文件，所以这样设置
            -->
            <form action ="user/login" method="post">
                <div class="form-group" id="profile" style="height: 100px;width:100px">

                </div>
                <div class="form-group">
                    <label for="username">用户名</label>
                    <!--一定注意，id是标签在前端框架中的唯一确定，class是样式类型种类，name是与后端交互属性-->
                    <input type="text" class="form-control" id="username" name="username" placeholder="用户名"><span id="msg" style="color:red"></span>
                </div>
                <div class="form-group">
                    <label for="username">密码</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                </div>

                <div class="form-group">
                    <label for="username">验证码</label>
                    <input type="password" class="form-control" id="verify" name="verify" placeholder="验证码">
                    <img src="user/verification" id="verification">
                </div>

                <button type="submit" class="btn btn-default">登陆</button>
                <a href="register.jsp">注册</a>
            </form>
        </div>

        <div class="col-md-3"></div>
    </div>
</div>
<!--实现异步刷新请求，在不刷新页面的情况下ajax发送请求，通过返回请求刷新部分内容，这里是刷新验证码的ajax请求-->
<script>
    //监听 #username 输入框的 blur（失去焦点）事件；拼接数据 "username=xxx"，作为 POST 请求的参数；使用自定义的 ajax() 方法发出请求，目标 URL 为 /user/getProfile；
    //当服务器返回头像地址 data 后，将其用 <img> 标签插入到 id 为 profile 的元素中，实现头像预览。
    let usernameInput = document.getElementById("username");
    console.log(usernameInput.value+"hahah");
    usernameInput.addEventListener("blur",function(){
        ajax("POST","user/getProfile","username="+usernameInput.value,function (data){
            if(data){
                document.getElementById("profile").innerHTML = "<img style='width: 80px' src='" +data+"'/>"
            }
        });
    })
    function ajax(method, url, data, fun){
        //创建一个对象（小弟帮我们发送请求）
        var xhr = new XMLHttpRequest()
        console.log(xhr.readyState)
        // => 0
        // 初始化 请求代理对象

        //建立连接
        xhr.open(method, url)
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8")//application/x-www-form-urlencoded 是传统表单格式，适用于 "username=xxx" 这样的参数格式。

        console.log(xhr.readyState)
        // => 1
        // open 方法已经调用，建立一个与服务端特定端口的连接

        //发送报文
        xhr.send(data)

        //监听事件
        xhr.addEventListener('readystatechange', function () {
            switch (this.readyState) {
                case 2:
                    // => 2
                    // 已经接受到了响应报文的响应头

                    // 可以拿到头
                    // console.log(this.getAllResponseHeaders())
                    console.log(this.getResponseHeader('server'))
                    // 但是还没有拿到体
                    console.log(this.responseText)
                    break

                case 3:
                    // => 3
                    // 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整

                    // 在这里处理响应体不保险（不可靠）
                    console.log(this.responseText)
                    break

                case 4:
                    // => 4
                    // 一切 OK （整个响应报文已经完整下载下来了）

                    // 这里处理响应体
                    console.log(this.responseText)
                    //用于在状态 4 完成后，把服务器返回的数据交给调用者处理；也就是展示图片
                    fun(this.responseText);
                    break
            }
        })
    }

    document.getElementById("verification").addEventListener("click",function(){
        document.getElementById("verification").setAttribute("src", "user/verification?" + new Date().getTime());
    })
</script>

</body>
</html>
